<template>
  <div id="full-screen2-main">
    <div id="full-monitor-main">
      <TopTitle />
      <div class="main-content-full">
        <div class="con-left">
          <div class="cl-con-3">
            <div class="cl-con-3-panel">
              <!-- 接入设备类型 -->
              <div class="chart1"><DeviceCateChart /></div>
            </div>

          </div>
          <div class="cl-con-3">
            <!-- 在线统计 -->
            <div class="cl-con-3-panel">
              <div class="chart1">
                <DeviceOnlineChart />
              </div>
            </div>
          </div>
          <div class="cl-con-3">
            <!-- 业务关联分布 -->
            <div class="cl-con-3-panel">
              <div class="chart1">
                <RelevanceDistChart />
              </div>

            </div>
          </div>
          <!--  硬件信息        -->
          <div class="cl-con-cpu">
            <div class="cl-con-cpu-panel">
              <CpuChart :datas="refData.cpu"/>
            </div>
          </div>
        </div>
          <!--  世界/中国地图      -->
        <div class="con-right">
          <div class="con-right-center">
            <div class="china-map">
              <div class="china-map-panel">
                  <!--世界/地图-->
<!--                <ChinaMapChart />-->
                <WorldMapChart/>
              </div>
            </div>
            <div class="con-right-bottom">
              <div class="con-right-bottom-buttons">
                <ButtonGroup/>
              </div>
              <div class="con-right-bottom-info">
                <div class="con-memory">
                  <MemoryChart :used="refData.memory.used" :frees="refData.memory.free"/>
                </div>
                <div class="con-storage">
                  <StorageChart :used="refData.storage.used" :frees="refData.storage.free"/>
                </div>
              </div>
            </div>
          </div>
          <div class="con-right-right">
            <div class="con-right-right-top">
              <div class="alarm-count">
                <!-- 报警统计 -->
                <AlarmCountChart />
              </div>
            </div>
            <div class="con-right-right-bottom">
              <div class="con-alarm-bg">
                <div class="alarm-title">{{$t('Real_time_alarm_info')}}</div>
                <div class="alarm-list">
                  <AlarmActualList />
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 载user后才会自动跳转登录页面  -->
    <div :style="{display:'none'}"><User/></div>
  </div>
</template>
<script>
import TopTitle from './FullScreen1/TopTitle'
import DeviceCateChart from './FullScreen1/DeviceCateChart'
import DeviceOnlineChart from './FullScreen1/DeviceOnlineChart'
import RelevanceDistChart from './FullScreen1/RelevanceDistChart'
import CpuChart from './FullScreen1/CpuChart'
import ChinaMapChart from './FullScreen1/ChinaMapChart'
import WorldMapChart from './FullScreen1/WorldMapChart'
import ButtonGroup from './FullScreen1/ButtonGroup'
import MemoryChart from './FullScreen1/MemoryChart'
import StorageChart from './FullScreen1/StorageChart'
import AlarmCountChart from './FullScreen1/AlarmCountChart'
import AlarmActualList from './FullScreen1/AlarmActualList'
import FullScreenMonitor from "@/api/FullScreenMonitor";
import User from '@/components/main/components/user'
import MapCenterInfo from "@/api/mapinfo";
import {apiResult} from "@/libs/util";
import {mapActions} from "vuex";

export default {
  components: {TopTitle,DeviceCateChart,DeviceOnlineChart,RelevanceDistChart,CpuChart,ChinaMapChart,WorldMapChart,ButtonGroup,
    MemoryChart,StorageChart,AlarmCountChart,AlarmActualList,User},
  data() {
    return {
      api: new FullScreenMonitor(),
      mapApi: new MapCenterInfo(),
      refData:{
        memory:{
          used: '60',
          free: '40'
        },
        storage:{
          used: '100',
          free: '512'
        },
        cpu:[]
      },
      timer:null
    }
  },
  methods:{
    ...mapActions([
      'clearToken',
      ]),
    setFullScreen(){
      if (document.documentElement.RequestFullScreen) {
        document.documentElement.RequestFullScreen();
      }
      //兼容火狐
      //console.log(document.documentElement.mozRequestFullScreen)
      if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      }
      //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
      if (document.documentElement.webkitRequestFullScreen) {
        document.documentElement.webkitRequestFullScreen();
      }
      //兼容IE,只能写msRequestFullscreen
      if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
      }
    },
    exitFullScreen(){
      if (document.exitFullScreen) {
        console.log("退出全屏 exitFullScreen")
        document.exitFullscreen()
      }
      //兼容火狐
      //console.log(document.mozExitFullScreen)
      if (document.mozCancelFullScreen) {
        console.log("退出全屏 mozCancelFullScreen")
        document.mozCancelFullScreen()
      }
      //兼容谷歌等
      if (document.webkitExitFullscreen) {
        console.log("退出全屏 webkitExitFullscreen")
        document.webkitExitFullscreen()
      }
      //兼容IE
      if (document.msExitFullscreen) {
        console.log("退出全屏 msExitFullscreen")
        document.msExitFullscreen()
      }
    },
    refreshData() {
      const that = this;
      this.api.getHardwareData().then(res => {
        apiResult(res.data,false,result=>{
          that.refData.memory = result.data.memory;
          that.refData.storage = result.data.storage;
          this.refData.cpu = result.data.cpu;
        })

      });
    },
    relogin(){
      this.clearToken();
      this.$router.push({
        name: 'login'
      })
    },
  },
  mounted() {
    if (!window.relogin)
      window.relogin = this.relogin;
    this.setFullScreen();
    this.refreshData();
    this.timer = setInterval(this.refreshData, 5000);
  },
  destroyed() {
    this.exitFullScreen();
    if (this.timer){
      //console.log("clearInterval");
      clearInterval(this.timer);
    }
  }
}

</script>
<style lang="less">
.ivu-layout-content{
  overflow: auto !important;
}
#full-screen2-main{
  width: 1920px;
  height: 1080px;
}
#full-monitor-main {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  display: flex;
  flex-direction: column;
  //overflow: auto;
  .main-content-full{
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    //border: 0.5px solid #2B333F;

    .con-left {
      display: flex;
      width: calc(100% / 5 * 1);
      height: 100%;
      flex-wrap: wrap;
      border: 0.5px solid #2B333F;
      //background-color: #0e3156;
      .cl-con-3{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: calc(100% / 9 * 2);
        //border: 1px solid #14edc5;
        .cl-con-3-panel{
          width: 80%;
          height: 80%;
          //background: url("./FullScreen1/img/left123.png");
          background: url("./FullScreen1/img/border-right1.png");
          background-size:100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .chart1{
            width: 90%;
            height: 90%;
            //background-color: #00ff00;
          }
        }
      }
      .cl-con-cpu{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: calc(100% / 9 * 3);
        //border: 1px solid #14edc5;
        .cl-con-cpu-panel{
          width: 80%;
          height: 80%;
          background: url("./FullScreen1/img/cpu.png");
          background-size:100% 100%;
        }
      }
    }

    .con-right {
      width: calc(100% / 5 * 4);
      height: 100%;
      display: flex;
      border: 0.5px solid #2B333F;

      .con-right-center{
        width: calc(100% / 4 * 3);
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        //border: 0.5px solid #2B333F;

        .china-map{
          width: 100%;
          height: calc(100% /9 * 6);
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          //border: 1px solid #14edc5;
          .china-map-panel{
            width: 95%;
            height: 95%;
            background: url("./FullScreen1/img/map-bg.png");
            background-size:100% 100%;
          }
        };

        .con-right-bottom{
          width: 100%;
          height: calc(100% /9 * 3);
          display: flex;
          flex-wrap: wrap;
          //border: 1px solid #2B333F;

          .con-right-bottom-buttons{
            width: 100%;
            height: calc(100% /3 * 1);
            display: flex;
            //justify-content: center;
            justify-content:center;//space-evenly;
            align-items: center;
            flex-wrap: wrap;
            //border: 1px solid #2B333F;

            /*         .button1{
                       //width: calc(80%/7*1);
                       //height: 80%;
                       width: 114px;
                       height: 79px;
                       //background: url("./FullScreen1/img/button/zhdd-0.png");
                       //background: btnimg1;
                       background-size:100% 100%;
                       display: flex;
                       flex-direction: column-reverse;
                       align-items: center;
                       cursor: pointer;
                       .button1-txt{
                         font-size: 16px;
                         margin-bottom: 5px;
                         color: #a64bf4;
                         cursor: pointer;
                       }
                     }*/
          }
          .con-right-bottom-info{
            width: 100%;
            height: calc(100% /3 * 2);
            display: flex;
            justify-content:space-evenly;
            align-items: center;
            flex-wrap: wrap;
            //border: 1px solid #2B333F;

            .con-memory{
              margin-bottom: 20px;
              width: calc(90%/2*1);
              height: 80%;
              background: url("./FullScreen1/img/border-buttom12.png");
              background-size:100% 100%;
            }

            .con-storage{
              margin-bottom: 20px;
              width: calc(98%/2*1);
              height: 80%;
              background: url("./FullScreen1/img/border-buttom12.png");
              background-size:100% 100%;
            }

          }
        };
      }

      .con-right-right{
        width: calc(100% / 4 * 1);
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        //background-color: #a64bf4;

        .con-right-right-top{
          width: 100%;
          height: calc(100% / 9 * 4);
          display: flex;
          justify-content: center;
          align-items: center;
          //border: 1px solid #14edc5;
          .alarm-count{
            width: 90%;
            height: 90%;
            background: url("./FullScreen1/img/border-right1.png");
            background-size:100% 100%;
          }
        }
        .con-right-right-bottom{
          width: 100%;
          height: calc(100% / 9 * 5);
          display: flex;
          justify-content: center;
          align-items: center;
          //border: 1px solid #14edc5;
          .con-alarm-bg{
            width: 90%;
            height: 90%;
            display: flex;
            flex-direction: column;
            background: url("./FullScreen1/img/border-right2.png");
            background-size:100% 100%;
            .alarm-title{
              width: 100%;
              height: 20px;
              margin-top: 30px;
              font-size: 18px;
              color: #FFFFFF;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .alarm-list{
              width: 90%;
              height: 90%;

            }
          }
        }
      }
    }
  }
}
</style>
